<template>
	<view class="addAddress">
		<HeaderBar title="添加地址" showBack fixed />
		<view class="contentBox">
			<view class="from">
				<view class="fromItem">
					<view class="lable">
						请选择钱包网络
					</view>
					<view class="inputBox" @click="open">
						<view class="">
							<text class="placeholder" v-if='!selctChain'>请选择钱包网络</text>
							<view class="select" v-if='selctChain'>
								<image :src="'/static/images/chain/' +selctChain.chainName+'.png'" mode="" class="icon">
								</image>
								<text>{{selctChain.chainName}}</text>
							</view>
						</view>
						<view class="right">
							<image src="../../static/images/personal/iptRight.png" mode="widthFix" class="icon"></image>
						</view>
					</view>
				</view>
				<view class="fromItem mt1">
					<view class="lable">
						钱包地址
					</view>
					<view class="inputBox">
						<view class="textarea">
							<textarea class="tt font" auto-height type="text" v-model="address" placeholder="请输入地址"
								placeholder-style="color: #B2B2B2;font-size:24upx" />
						</view>
					<!-- 	<view class="right">
							<image src="../../static/images/personal/iptSand.png" mode="widthFix"
								style="width: 36upx;height: 36upx;" @tap="scanQRCode"></image>
						</view> -->
					</view>
				</view>
				<view class="fromItem mt2">
					<view class="lable">
						请设置名称
					</view>
					<view class="inputBox">
						<view class="input">
							<input type="text" class="font" v-model="name" placeholder="请输入名称"
								placeholder-style="color: #B2B2B2;font-size:24upx" />
						</view>
					</view>
				</view>
				<view class="fromItem mt2">
					<view class="lable">
						设置备注
					</view>
					<view class="inputBox">
						<view class="input">
							<input type="text" class="font" v-model="remark" placeholder="备注仅做补充信息，不参与链上交易"
								placeholder-style="color: #B2B2B2;font-size:24upx" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="" @tap="renderjs.verifyAddress" :data-address="address" :data-rpc="rpc" :data-type="chainType">
				保存
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#FFFFFF" border-radius="10px 10px 0 0">
			<view class="popupTitle">
				请选择网络
				<text class="iconfont icon-guanbi"></text>
			</view>
			<scroll-view scroll-y="true" class="scroll-Y">
				<!-- {{allchains}} -->
				<view class="" v-for="(item,index) in allchains" :key="index">
					<view class="scroll-view-item" @tap="selectChain(item)">
						<image :src="'/static/images/chain/' +item.chainName+'.png'" mode="widthFix" class="icon">
						</image>
						<view class="chain">
							<view class="name">
								{{item.chainName}}
							</view>
							<view class="checkbox">
								<uni-icons type="checkbox-filled" :size="20"
									v-if="selctChain.chainId==item.chainId"></uni-icons>
								<uni-icons type="circle" :size="20" class="check" v-else></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- <view class="popupBtn">
				<view class="pbtn">
					确定
				</view>
			</view> -->
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selctChain: null,
				chainType: "",
				address: "",
				name: "",
				remark: "",
				selctChainID: ""
			}
		},
		computed: {
			allchains() {
				return this.$store.getters.getAllchains;
			},
			rpc() {
				return this.$store.getters.getRpc
			},
		},
		onLoad(options) {
			this.selctChainID = options.selctChainID || 5867
		},
		mounted() {
			const selctChain = this.allchains?.find(item => item.chainId == this.selctChainID)
			this.selctChain = selctChain
			this.chainType = selctChain?.chainType
		},
		methods: {
			async save() {
				if (!this.name) {
					return this.toast('请输入名称')
				}
				let list = await uni.$db.select('list', { // 普通查询
					from: 'addressBook',
					where: [{
						chainId: `= "${this.selctChain.chainId}"`,
						address: `= "${this.address}"`,
					}]
				})
				if (list.length > 0) {
					return this.toast("该地址已存在地址簿")
				}
				let data = {
					address: this.address, //钱包地址
					addressName: this.name, //钱包名称
					chainType: this.selctChain.chainType, //链类型
					chainImg: this.selctChain.ico, //链图标
					chainName: this.selctChain.chainName, //链名
					chainId: this.selctChain.chainId + "", //链ID
					addressRemark: this.remark, //地址备注
				}
				uni.$db.insert('list', 'addressBook', data).then((res) => {
					uni.$emit("addressBook", "")
					uni.$emit("addressBookID", "")
					uni.navigateBack();
				}).catch((err) => {
					return this.toast('添加失败，请退出重新添加')
				});
			},
			toast(msg) {
				uni.showToast({
					title: msg,
					position: "bottom",
					icon: 'none'
				});
			},
			selectChain(chain) {
				this.$refs.popup.close()
				this.selctChain = chain
				this.chainType = chain.chainType
			},
			open() {
				this.$refs.popup.open('bottom')
			},
			// scanQRCode() {
			// 	uni.scanCode({
			// 		success: (res) => {
			// 			this.address = res.result;
			// 		},
			// 		fail: (err) => {
			// 			// 扫描失败的回调
			// 			this.toast("识别失败")
			// 		}
			// 	});
			// },
		}
	}
</script>
<script module="renderjs" lang="renderjs">
	export default {
		data() {
			return {
				jsLoadState: false,
				tjsLoadState: false,
			}
		},
		mounted() {
			const ethersScript = document.createElement('script');
			ethersScript.src = 'static/script/ethers-5.2.umd.min.js';
			ethersScript.onload = async () => {
				this.jsLoadState = true;
			};
			document.head.appendChild(ethersScript);
			// 载入 TronWeb.js
			const tronWebScript = document.createElement('script');
			tronWebScript.src = 'static/script/newTronWeb.js';
			tronWebScript.onload = () => {
				this.tjsLoadState = true;

			};
			document.head.appendChild(tronWebScript);
		},
		methods: {
			verifyAddress(e) {
				if (e.target.dataset.type == "ETH") {
					if (this.jsLoadState) {
						const isValid = ethers.utils.isAddress(e.target.dataset.address);
						if (isValid) {
							this.$ownerInstance.callMethod('save')
						} else {
							this.$ownerInstance.callMethod('toast', "地址有误")
						}
					}
				} else {
					if (this.tjsLoadState) {
						const tronWeb = new TronWeb.TronWeb({
							fullHost: e.target.dataset.rpc
						});
						const isValid = tronWeb.isAddress(e.target.dataset.address);
						if (isValid) {
							this.$ownerInstance.callMethod('save')
						} else {
							this.$ownerInstance.callMethod('toast', "地址有误")
						}
					}
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "/static/iconfont/iconfont.css";

	.addAddress {
		height: 100%;
		font-weight: 26upx;
		font-weight: 400;
		color: #3D3D3D;
		font-size: 28upx;

		.contentBox {
			padding: 32upx 40upx;
			border-top: 2upx solid #F6F6F6;

			.from {
				.mt1 {
					margin-top: 36upx;
				}

				.mt2 {
					margin-top: 40upx;
				}

				.fromItem {
					.lable {
						margin-bottom: 18upx;
					}

					.inputBox {
						border: 2upx solid #C3C3C3;
						border-radius: 20upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 90upx;
						padding-left: 42upx;
						padding-right: 30upx;

						.textarea {
							flex: 1;
							margin-right: 20upx;

							.tt {
								width: 100%;
								padding: 20upx 0;
							}
						}

						.placeholder {
							color: #B2B2B2;
							font-size: 24upx
						}

						.font {
							font-size: 28upx
						}

						.select {
							display: flex;
							align-items: center;

							.icon {
								width: 68upx;
								height: 68upx;
								margin-right: 30upx;
							}
						}

						.right {
							display: flex;

							.icon {
								width: 20upx;
								height: 20upx;
							}
						}

						.input {
							flex: 1;
						}
					}
				}
			}
		}

		.btn {
			margin: 0 40upx;
			font-size: 26upx;
			color: #F6F6F6;
			line-height: 88upx;
			background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
			border-radius: 10upx;
			text-align: center;
			margin-top: 228upx;
		}

		.popupTitle {
			text-align: center;
			position: relative;
			height: 80upx;
			line-height: 80upx;
			font-size: 28upx;

			.iconfont {
				position: absolute;
				right: 30upx;
			}
		}

		.scroll-Y {
			height: 50vh;

			.scroll-view-item {
				height: 120upx;
				display: flex;
				align-items: center;
				padding: 0 30upx;

				.icon {
					width: 68upx;
					height: 68upx;
				}

				.chain {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 30upx;
					font-size: 28upx;
					border-bottom: 0.5px solid #D8D8D8;
					height: 100%;

				}
			}
		}

		.popupBtn {
			padding: 30upx 40upx;

			.pbtn {
				font-size: 26upx;
				color: #F6F6F6;
				line-height: 88upx;
				background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
				border-radius: 10upx;
				text-align: center;
			}
		}
	}
</style>